@import "../../styles/colors";
.cm-spinner {
    border-radius: 3px;
    height: 32px;
    background-color: #ffffff;
    position: relative;
    display: inline-block;
    padding-right: 20px;
    width: 100%;
  
    span {
      display: block;
    }
    .cm-spinner-plus,
    .cm-spinner-subs {
      position: absolute;
      height: 50%;
      width: 20px;
      background-color: whitesmoke;
      font-size: 13px;
      text-align: center;
      cursor: pointer;
      border: 1px solid rgba(0,0,0,0.1);
      border-left: 0;
      &:hover{
        color: @color-blue;
      }
    }
    .cm-spinner-plus{
      border-top-right-radius: 3px;
      svg {
        top: 55%;
      }
    }
    .cm-spinner-subs {
      border-top: 0;
      border-bottom-right-radius: 3px;
    }
    .cm-icon {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .cm-spinner-plus {
      top: 0;
      right: 0;
    }
    .cm-spinner-subs {
      bottom: 0;
      right: 0;
    }
    .cm-spinner-value {
      width: 100%;
      height: 100%;
      line-height: normal;
      .cm-input{
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
      }
    }
  
    &.cm-spinner-small{
      height: 24px;
      .cm-input{
        height: 24px;
      }
    }
    &.cm-spinner-large{
      height: 40px;
      .cm-input{
        height: 40px;
      }
    }
  }
  